<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar title="专区"></fa-navbar>
		<view class="u-p-l-20 u-p-r-20 u-p-t-30 u-p-b-10 zone-list">
			<view class="flex flex-wrap">
				<wanl-empty class="w100" v-if="list.length == 0"></wanl-empty>
				<view class="zone u-text-center" v-for="(item, index) in list" :key="index">
					<view class="zone-item" @click="openDetail(item.id)">
						<u-avatar :src="item.image" size="120"></u-avatar>
						<view class="title u-font-28 u-p-t-20 u-p-b-20 text-bold" :style="[{ color: theme.bgColor }]">{{ item.name }}</view>
						<view class="u-tips-color u-text-left u-font-22 u-line-4">{{ item.intro }}</view>
						<view class="fa-bottom">
							<u-button hover-class="none"
								type="primary"
								:custom-style="{ width: '50%', backgroundColor: theme.bgColor, color: theme.color }"
								size="mini"
								shape="circle"
								:ripple="true"
								@click="openDetail(item.id)"
							>
								查 看
							</u-button>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<view class="u-p-t-30 u-p-b-30" v-if="list.length > 0"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{color:theme.bgColor}" :custom-style="{backgroundColor:theme.lightColor}"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	onLoad() {
		this.getZoneIndex();
	},
	data() {
		return {
			list: [],
			page: 1,
			scrollTop: 0,
			has_more: false,
			status: 'loadmore'
		};
	},
	methods: {
		openDetail(id) {
			if (!this.vuex_token) {
				this.$wanlshop.to(`/pages/user/auth/name?url=${encodeURIComponent('/pages/community/zone/index')}`);
				return;
			}			
			this.$wanlshop.to(`/pages/community/zone/detail?id=${id}`)
		},
		getZoneIndex: async function() {
			let res = await this.$api.getZoneIndex({ page: this.page });
			this.status = 'loadmore';
			uni.stopPullDownRefresh();
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			this.has_more = res.data.current_page < res.data.last_page;
			this.list = this.list.concat(res.data.data);
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//下拉刷新
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.getZoneIndex();
	},
	//底部加载更多
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getZoneIndex();
		}
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}
.zone {
	width: 50%;
	padding: 20rpx;
}
.zone-item {
	background: #fff;
	border-radius: 8rpx;
	padding: 20rpx;
	height: 460rpx;
	position: relative;
}

.zone-item .fa-bottom {
	position: absolute;
	bottom: 6%;
	width: 88%;
}
</style>
